<template>
  <div class="app-container">
    <div v-if="user">
      <el-row :gutter="20">
        <el-col :span="6" :xs="24">
          <user-card :user="user" />
        </el-col>

        <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab">
              <el-tab-pane label="登录日志" name="record">
                <user-record></user-record>
              </el-tab-pane>
              <el-tab-pane label="修改信息" name="account">
                <account :user="user" />
              </el-tab-pane>
              <el-tab-pane label="修改密码" name="password">
                <password :username="user.name" />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getInfo } from '@/api/user'
import UserCard from "./components/UserCard";
import UserRecord from "./components/UserRecord";
import Account from "./components/Account";
import Password from "./components/Password";

export default {
  name: "Profile",
  components: { UserCard, UserRecord, Account, Password },
  data() {
    return {
      user: {},
      activeTab: "record"
    };
  },
  computed: {
    ...mapGetters([
      'token',
    ])
  },
  created() {
    this.getUser();
  },
  methods: {
    getUser() {

      getInfo(this.token)
        .then(res => {
          if (!res) {
            return this.$message.error("获取用户信息失败.")
          }
          console.log('getUser:', res);
          this.user = res
          this.user["roles"] = res.roles.join(" | ")
        })
        .catch(error => {
          this.$message.error("获取用户信息失败!")
        });
    }
  }
};
</script>
